<template>
  <div>
    <div>缴费记录</div>
    <div style="line-height: 0px">
      <div style="text-align: left" class="payMR">
        <span>账单编号：</span>
        <el-input
          v-model="payMentVo.billNum"
          style="width: 130px"
          placeholder="请输入账单编号"
          @blur="getBNum($event)"
          suffix-icon="el-icon-date"
          size="mini"
        ></el-input>

        <span style="margin-left: 30px">所属房屋：</span>
        <el-input
          v-model="payMentVo.tHouse"
          style="width: 130px"
          placeholder="请输入房屋地址"
          @blur="getTHouse($event)"
          suffix-icon="el-icon-date"
          size="mini"
        ></el-input>

        <span style="margin-left: 30px">业主姓名：</span>
        <el-input
          v-model="payMentVo.lName"
          style="width: 130px"
          placeholder="请输入业主姓名"
          @blur="getLName($event)"
          suffix-icon="el-icon-date"
          size="mini"
        ></el-input>

        <span style="margin-left: 30px">账目类别：</span>
        <el-select
          v-model="value"
          placeholder="请选择"
          @change="getccId($event)"
          style="width: 100px"
          size="mini"
        >
          <el-option
            v-for="item in chargeccs"
            :key="item.id"
            :label="item.chargeProject"
            :value="item.id"
            valie="chargeccs[0].id"
          >
          </el-option>
        </el-select>
        <span style="margin-left: 30px">支付方式: </span>
        <el-select
          v-model="value1"
          placeholder="请选择"
          @change="getmmId($event)"
          style="width: 100px"
          size="mini"
        >
          <el-option
            v-for="item in paymms"
            :key="item.id"
            :label="item.method"
            :value="item.id"
          >
          </el-option>
        </el-select>

        <el-table
          ref="filterTable"
          :data="tableData"
          style="width: 100%; height: 100%"
          :header-cell-style="{ 'text-align': 'center' }"
          @sort-change="getSortable($event)"
          v-loading="loading"
          element-loading-text="拼命加载中"
        >
          <el-table-column prop="id" label="ID" width="50"> </el-table-column>
          <el-table-column prop="billNumber" label="账单编号" width="155">
          </el-table-column>
          <el-table-column
            prop="landlord.name"
            label="业主姓名"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="room.buildingNum" label="所属房屋" width="200">
            <template slot-scope="scope">
              {{ scope.row.room.buildingNum }}- {{ scope.row.room.unit }}-
              {{ scope.row.room.floor }}楼 {{ scope.row.room.roomNum }}号
            </template>
          </el-table-column>
          <el-table-column
            prop="chargeConfig.chargeProject"
            label="账单类目"
            width="80"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="amountReceivable" label="实收金额" width="80">
            <template slot-scope="scope">
              ¥{{ towNumber(scope.row.amountReceivable) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="collectionTime"
            label="缴费时间"
            sortable="custom"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="payMentMethod.method"
            label="支付方式"
            width="80"
            align="center"
          >
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :background="true"
            @size-change="sizeChange"
            @current-change="currentPayList"
            :current-page="payMentVo.pageBean.currPage"
            :page-sizes="pageSizes"
            :page-size="payMentVo.pageBean.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="payMentVo.pageBean.totalNum"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      payMentVo: {
        billNum: "",
        tHouse: "",
        lName: "",
        ccId: 0,
        pmId: 0,
        sort: "",
        pageBean: {
          currPage: 1,
          pageSize: 5,
          totalPages: 0,
          totalNum: 0,
        },
        payMentRecords: {
          landlord: {
            id: 0,
          },
        },
      },
      pageSizes: [5, 10, 20, 50],
      paymms: [
        {
          id: "选项1",
          method: "全部",
        },
      ],
      chargeccs: [
        {
          id: "0",
          chargeProject: "黄金糕",
        },
      ],
      tableData: [],
      value: "",
      value1: "",
      loading: true,
    };
  },
  created() {
    this.currentPayList(this.payMentVo.pageBean.currPage);
    this.getConfigList();
    this.getPayMMList();
  },
  methods: {
    //排序
    getSortable(e) {
      //console.log(e.order);
      this.payMentVo.sort = e.order;
      this.payList(this.payMentVo);
    },
    //获得账单类目列表
    getConfigList() {
      this.$axios
        .post("http://localhost:8080/api/v1/pay/getConfigList")
        .then((r) => {
          //console.log(r.data);
          this.chargeccs = r.data.data;
        });
    },
    //获取账单类目id
    getccId(value) {
      //console.log("账单: ", value); //获取下拉框id 选项1
      this.payMentVo.ccId = value;
      this.payList(this.payMentVo);
    },
    //获取支付类型id
    getmmId(value) {
      //console.log("支付: ", value);
      this.payMentVo.pmId = value;
      this.payList(this.payMentVo);
    },
    //获取业主姓名
    getLName(e) {
      this.payMentVo.lName = e.target.value;
      this.payList(this.payMentVo);
    },
    //获取支付类型列表
    getPayMMList() {
      this.$axios
        .post("http://localhost:8080/api/v1/pay/getPayMMList")
        .then((r) => {
          //console.log(r.data);
          this.paymms = r.data.data;
        });
    },
    //模糊查询账单编号
    getBNum(e) {
      //console.log("billNum: ",e.target.value); //获取输入框值
      this.payMentVo.billNum = e.target.value;
      this.payList(this.payMentVo);
    },
    //模糊查询房屋
    getTHouse(e) {
      //console.log("tHouse: ",e.target.value); //获取输入框值
      this.payMentVo.tHouse = e.target.value;
      this.payList(this.payMentVo);
    },
    //当前页
    currentPayList(value) {
      this.payMentVo.pageBean.currPage = value;
      this.payList(this.payMentVo);
    },
    //获取缴费记录数据
    payList(payMentVo) {
      this.$axios
        .post("http://localhost:8080/api/v1/pay/list", payMentVo)
        .then((r) => {
          //console.log(payMentVo);
          //console.log(r.data);
          this.tableData = r.data.data.data;
          this.payMentVo.pageBean.totalNum = r.data.data.totalNum;
          this.loading = false;
        });
    },
    //每页数据
    sizeChange(val) {
      this.payMentVo.pageBean.pageSize = val;
      this.$axios
        .post("http://localhost:8080/api/v1/pay/list", this.payMentVo)
        .then((r) => {
          //console.log(r.data.data);
          this.tableData = r.data.data.data;
          this.payMentVo.pageBean.totalNum = r.data.data.totalNum;
        });
    },
    //小数后两位
    towNumber(val) {
      return val.toFixed(2);
    },
  },
};
</script>
<style>
.payMR span {
  font-size: 10px;
}
</style>